<template>
  <div class="detail">
    <div class="detailTitle">
      <p>
        <van-icon name="revoke" color="#fff" size="14" @click="onClickLeft" />
      </p>
      <p><van-icon name="share-o" color="#fff" size="14" /></p>
    </div>
    <div class="banner">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        height="232"
        indicator-color="white"
      >
        <van-swipe-item v-for="item in product_img_www" :key="item.index"
          ><img :src="item.url"
        /></van-swipe-item>
      </van-swipe>
    </div>
    <div class="itemData">
      <p class="tit">{{ productData.title }}</p>
      <p class="ttp">{{ productData.subtitle }}</p>
      <div class="bbx">
        <span v-for="(item, index) in productData.mark" :key="index">{{
          item.name
        }}</span>
      </div>
      <p class="price">￥{{ productData.max_price }}/人</p>
    </div>
    <div class="wapp">
      <div class="wapp_top">
        <span>评分：5.0</span
        ><a href="#">查看全部<van-icon name="arrow" size="0.26rem" /></a>
      </div>
      <div class="wapp_bom">
        <div class="wapp_con"><span>t***7</span><span>2021-09-18</span></div>
        <div class="wapp_bb">
          <ul>
            <li>
              <span>行程安排：</span
              ><van-rate v-model="value" gutter="2" size="12" />
            </li>
            <li>
              <span>行程安排：</span
              ><van-rate v-model="value" gutter="2" size="12" />
            </li>
            <li>
              <span>行程安排：</span
              ><van-rate v-model="value" gutter="2" size="12" />
            </li>
            <li>
              <span>行程安排：</span
              ><van-rate v-model="value" gutter="2" size="12" />
            </li>
          </ul>
        </div>
        <p>
          房间非常有档次，屋内的配套也相当高级，两天都给了零食，全部在冰箱里，都可以免费吃，然后就是采摘，一筐9个梨，是免费的，工作小姐姐带着去，还多给了一个，非常贴心，出门要叫高尔夫车，按零键就可以，一般两三分钟就到了，挺方便的，就是晚上九点左右叫车有点慢，其他时间都非常快，之前看网评说工作人员态度不好，完全没有，工作人员非常友好耐心，我的浴巾忘在了酒店，给我打电话说给我免费邮寄，非常暖心。Discovery建议选择高空网针，大概需要40分钟，悬崖泳池随时可以去，不限时间的，孩子喜欢，总之，非常赞的酒店，去庾村步行也很方便。
        </p>
      </div>
    </div>
    <div class="strCon">
      <!-- <p v-html="productData.feature[0]?.content"></p> -->
      <p v-for="item in productData.product_img_wx" :key="item.index">
        <img v-lazy="item.url" />
      </p>
    </div>
    <div class="footer">
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#c04374" />
        <van-action-bar-icon
          v-show="!collect"
          @click="onCollect"
          icon="star"
          text="已收藏"
          color="#c04374"
        />
        <van-action-bar-icon
          v-show="collect"
          @click="onCollect"
          icon="star-o"
          text="未收藏"
          color="#c04374"
        />
        <van-action-bar-button
          type="danger"
          text="选着团期"
          @click="onClickButton(product_id)"
          color="#c04374"
        />
      </van-action-bar>
    </div>
    <Loading :isShow="show" />
    <BackTop />
  </div>
</template>

<script setup>
import { showToast } from "vant";
import { reqDetail } from "@/api/home";
import { ref } from "@vue/reactivity";
import { useRoute, useRouter } from "vue-router";
import Loading from "@/components/loading.vue";
import BackTop from "@/components/BackTop.vue";
const router = useRouter();
const route = useRoute();
let show = ref(true);
const product_id = route.query.id;
let collect = ref(true);
const value = ref(5);
let productData = ref("");
let product_img_www = ref("");
// console.log(product_id);
const loadTravel = async () => {
  const result = await reqDetail({ product_id });
  console.log(result);
  if (result.code == 0) {
    productData.value = result.data;
    product_img_www.value = result.data.product_img_www;
    show.value = false;
  }
};
loadTravel();
const onClickIcon = () => showToast("点击图标");
const onClickButton = (id) => {
  console.log(id);
  router.push({ path: "/selectDate", query: { id } });
};
const onCollect = () => {
  collect.value = !collect.value;
};
const onClickLeft = () => history.back();
</script>

<style scoped>
.detail {
  background-color: #efefef;
}
.detailTitle {
  height: 44px;
  justify-content: space-between;
  padding: 0 0.3rem;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  position: fixed;
  z-index: 10;
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.detailTitle p {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #000;
  opacity: 0.5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}
.my-swipe .van-swipe-item img {
  display: block;
  width: 100%;
  height: 100%;
}
.itemData {
  height: 2.85rem;
  box-sizing: border-box;
  padding: 0.3rem;
  background-color: #fff;
}
.itemData .tit {
  font-size: 0.3rem;
  color: #333;
}
.itemData .ttp {
  font-size: 0.24rem;
  color: #898989;
  margin: 0.2rem 0;
}
.itemData .bbx {
  font-size: 0.24rem;
  color: #c14374;
  margin: 0.2rem 0;
}
.itemData .bbx span {
  border: 1px solid #c14374;
  padding: 0.06rem 0.1rem;
  margin-right: 0.2rem;
}
.price {
  font-size: 0.36rem;
  color: #c04374;
}
.wapp {
  font-size: 0.32rem;
  width: 100%;
  height: 3.12rem;
  margin: 0.2rem 0;
  background-color: #fff;
}
.wapp_top {
  height: 0.74rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.3rem;
}
.wapp_top span {
  font-size: 0.3rem;
  color: #f90;
}
.wapp_top a {
  font-size: 0.26rem;
  color: #333;
}
.wapp_bom {
  padding: 0 0.3rem;
  height: 2.38rem;
  box-sizing: border-box;
  list-style: none;
}
.wapp_con {
  display: flex;
  justify-content: space-between;
  font-size: 0.28rem;
  color: #777;
  line-height: 0.6rem;
}

.wapp_bb ul {
  height: 1rem;
  box-sizing: border-box;
  font-size: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.wapp_bb ul li {
  width: 2.6rem;
  height: 0.5rem;
  line-height: 0.5rem;
  text-align: center;
  box-sizing: border-box;
}
.wapp_bom p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.24rem;
  color: #666;
  line-height: 0.6rem;
  box-sizing: border-box;
  padding-left: 0.26rem;
}
.strCon p {
  width: 100%;
  display: block;
  color: #666;
  font-size: 0.24rem;
}
.strCon p img {
  width: 100%;
}
</style>
